<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>双色球模拟</title>
    <style>
      ul {
        display: flex;
        justify-content: space-between;
        height: 100px;
        width: 50%;
        align-items: center;
        padding: 150px;
      }
      li {
        display: inline-block;
        width: 50px;
        height: 50px;
        box-shadow: 3px 3px grey;
        font-size: 20px;
        color: #ffffff;
        text-align: center;
        line-height: 50px;
        border-radius: 50%;
        /* animation: zx 1s infinite; */
      }
      .red {
        background: red;
      }
      .blue {
        background-color: blue;
      }
      button {
        box-shadow: 3px 3px grey;
        cursor: pointer;
        height: 30px;
        font-family: cursive;
        width: 60px;
        border: none;
        border-radius: 4px;
        background: pink;
        margin-left: 100px;
      }
      button:active {
        box-shadow: 1px 1px gray;
        transform: translateY(2px);
      }
      @keyframes zx {
        0% {
          transform: translateY(0px) rotateX(0deg) scale(1);
        }
        50% {
          transform: translateY(-100px) rotateX(360deg) scale(1.2);
        }
        100% {
          transform: translateY(0px) rotateX(720deg) scale(1);
        }
      }
    </style>
  </head>
  <body>
    <div>
      <ul>
        <li class="red"></li>
        <li class="red"></li>
        <li class="red"></li>
        <li class="red"></li>
        <li class="red"></li>
        <li class="red"></li>
        <li class="blue"></li>
        <button>开摇</button>
      </ul>
    </div>
    <script>
      let reds = document.getElementsByClassName("red");
      let lis = document.getElementsByTagName("li");
      let btn = document.getElementsByTagName("button")[0];
      let blue = document.getElementsByClassName("blue")[0];
      btn.addEventListener("click", function () {
        for (let i = 0; i < lis.length; i++) {
          lis[i].innerHTML = "";
        }
        let n = 0;
        let time = setInterval(() => {
          lis[n].style.animation = "zx 1s";
          n++;
          if (n == 7) {
            clearInterval(time);
          }
        }, 1000);
        // for(let i=0;i<7;i++){
        //     lis[i].style.animation = "zx "+(7-i)+"s";
        // }

        for (let i = 0; i < 7; i++) {
          lis[i].style.animation = "";
        }
        let bods = shake();
        //排序
        bods.sort((a, b) => {
          if (a > b) {
            return 1;
          }
          if (a < b) {
            return -1;
          }
          return 0;
        });

        //   for (let i = 0; i < reds.length; i++) {
        //     reds[i].innerHTML = bods[i];
        //   }
        let bluNum = (Math.random() * 16).toFixed();
        if (bluNum == 0) {
          bluNum++;
        }
        bods.push(bluNum);

        let p = 0;
        setTimeout(() => {
          let ptime = setInterval(() => {
            lis[p].innerHTML = bods[p];
            p++;
            if (p == 7) {
              clearInterval(ptime);
            }
          }, 1000);
        }, 1000);

        //   blue.innerHTML = bluNum;

        function shake() {
          let flag = true;
          while (flag) {
            let pd = false;
            let arr = [];
            for (let i = 0; i < 6; i++) {
              arr.push(parseInt((Math.random() * 34).toFixed()));
            }
            // 判断是否有相同的数
            for (let i = 0; i < arr.length; i++) {
              for (let j = i + 1; j < arr.length; j++) {
                if (arr[i] == arr[j]) {
                  pd = true;
                  break;
                }
              }
              if (arr[i] == 0 || arr[i] == 34) {
                pd = true;
              }
            }
            if (pd == false) {
              return arr;
            }
          }
        }
      });
    </script>
  </body>
</html>
